import qs from 'qs';
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, FormInstance } from "element-plus";
import { GetMenuBy } from "@/api/stu/bigdataprocessing"
import { GetAllClass } from "@/api/teacher/zsclass"
import { GetPlanByClassId } from "@/api/teacher/plan"
import { CaseAnalysisRecordGetAll } from "@/api/stu/CaseAnalysisRecord"
import { type PaginationProps } from "@pureadmin/table";
import { CaseAnalysisComments } from "@/api/teacher/CaseAnalysisRecors";

const updatePanelVisible = ref();
const loadingTitle = ref(undefined);
export function useEvaluation() {
  const froms = ref();
  const SearchFrom = reactive({
    pageIndex: 0,
    pageCount: 0,
    parentMenuName: "",
    menuId: "",
    menuName: "",
    classId: "",
    planId: ""
  })
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const formList = reactive<any>({
    CaseType: [],
    CaseName: [],
    ClassList: [],
    PalnList: []
  })
  const rules = {
    menuId: [
      {
        required: true,
        message: "请选择案例类别！",
        trigger: ["change"]
      }
    ],
    parentMenuName: [
      {
        required: true,
        message: "请选择案例名称！",
        trigger: ["change"]
      }
    ],
    classId: [
      {
        required: true,
        message: "请选择班级名称",
        trigger: ["change"]
      }
    ],
    planId: [
      {
        required: true,
        message: "请选择计划名称！",
        trigger: ["change"]
      }
    ],
  }
  //列
  const columns: TableColumnList = [
    {
      label: "序号",
      type: "index",
      minWidth: 100
    },
    {
      label: "学生姓名",
      prop: "userName",
      minWidth: 150
    },
    {
      label: "案例类别",
      prop: "menuName",
      minWidth: 120
    },
    {
      label: "案例名称",
      prop: "parentMenuName",
      minWidth: 150
    },
    {
      label: "案例分析",
      prop: "caseAnalysis",
      cellRenderer: ({ row }) => (
        <span>点击点评查看详情</span>
      ),
      minWidth: 150
    },
    {
      label: "状态",
      prop: "state",
      minWidth: 90,
      cellRenderer: ({ row }) => (
        <el-tag type={row.state === "0" ? "danger" : ""} effect="plain">
          {row.state === "1" ? "已评价" : "未评价"}
        </el-tag>

      )
    },
    {
      label: "教师评价",
      prop: "evaluation",
      minWidth: 150,
      cellRenderer: ({ row }) => (
        <el-tag type={
          row.evaluation === '0' ? "success" :
            row.evaluation === '1' ? "info" :
              row.evaluation === "2" ? "warning" :
                row.evaluation === "3" ? "danger" : ""}>
          {
            row.evaluation === "0" ? "优" :
              row.evaluation === "1" ? "良" :
                row.evaluation === "2" ? "合格" :
                  row.evaluation === "3" ? "不合格" : "未评价"
          }
        </el-tag>
      )
    },
    {
      label: "点评",
      fixed: "right",
      width: 180,
      slot: "operation"
    },
  ];
  const RatingList = [
    { id: "0", title: "优" },
    { id: "1", title: "良" },
    { id: "2", title: "合格" },
    { id: "3", title: "不合格" },
  ]

  //教师评价
  const TeaEvalsForms = reactive({
    MenuId: "",
    Comments: "",//教师点评
    PlanId: "",
    Evaluation: "",//教师评价0优1良2合格3不合格
    CaseAnalysis: "",//案例分析
    UserId: ""//用户id
  })
  const TeaEval = ref<boolean>(true);
  const dataList = ref();
  const loading = ref(false);
  // 获取案例类别
  async function GetCaseType() {
    const menuid = qs.stringify({ moudleId: 688 });
    const respone = await GetMenuBy(menuid);
    if (!respone.success) return;
    formList.CaseType = respone.data;
  }

  // 获取案例名称
  function seleteCaseType(even) {
    formList.CaseName = even.childrens;
    SearchFrom.parentMenuName = ""
  }

  // 获取班级名称
  async function GetClassName() {
    const respone = await GetAllClass();
    formList.ClassList = respone.data;
  }

  // 获取计划列表
  async function GetPlanList(even: any) {
    const classId = qs.stringify({ classId: even.key })
    const repone = await GetPlanByClassId(classId);
    SearchFrom.planId = "";
    formList.PalnList = repone.data == null ? [] : [repone.data];
  }
  // 关闭更新面板
  function CloseUpdatePanel(row: FormInstance | undefined) {
    if (!row) return;
    updatePanelVisible.value = false;
    row.resetFields();
  }
  // 点评
  function comment(row) {
    if (row) {
      TeaEvalsForms.CaseAnalysis = row.caseAnalysis;
      TeaEvalsForms.Comments = row.comments;
      TeaEvalsForms.Evaluation = row.evaluation;
      TeaEvalsForms.UserId = row.userId;
      TeaEvalsForms.MenuId = row.menuId;
      TeaEvalsForms.PlanId = row.planId;
      updatePanelVisible.value = true;
    } else {
      updatePanelVisible.value = false;
    }
  }
  //更新评论
  const updateComment = (caseForm: FormInstance | undefined) => {
    (caseForm as any).validate(async valid => {
      if (!valid) return;
      const respone = await CaseAnalysisComments(TeaEvalsForms);
      console.log(respone);
      if (respone.status == 200) {
        ElMessage({
          message: `点评成功`,
          type: "success"
        });
        CloseUpdatePanel(caseForm);
        onSearch(caseForm);
      } else {
        ElMessage({
          message: `点评失败`,
          type: "error"
        });
      }
    });
  };

  function handleSelectionChange(row) { onSearch(row) };
  function handleCurrentChange(row) { onSearch(row) };
  function handleSizeChange(row) { onSearch(row) };
  function onSearch(row: FormInstance | undefined) {
    (row as any).validate(async valid => {
      if (!valid) return;
      const data = {
        pageIndex: pagination.currentPage,
        pageCount: pagination.pageSize,
        parentMenuName: SearchFrom.parentMenuName.displayName,
        menuId: SearchFrom.parentMenuName.id,
        menuName: SearchFrom.menuId.displayName,
        classId: SearchFrom.classId.key,
        planId: SearchFrom.planId
      }
      const respone = await CaseAnalysisRecordGetAll(data);
      if (respone.success) {
        dataList.value = respone.data.list;
        pagination.total = respone.data.totalCount;
        pagination.pageSize = respone.data.pageSize;
        pagination.currentPage = respone.data.pageIndex;
      }
    })
  }

  function resetForm(row) {
    row.resetFields()
  }

  onMounted(() => {
    GetCaseType();
    GetClassName()
  })
  return {
    rules,
    TeaEval,
    formList,
    dataList,
    TeaEvalsForms,
    RatingList,
    loading,
    columns,
    SearchFrom,
    pagination,
    updatePanelVisible,
    comment,
    onSearch,
    resetForm,
    GetCaseType,
    GetClassName,
    GetPlanList,
    seleteCaseType,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    CloseUpdatePanel,
    updateComment
  }
}
